<template>
  <div class="m-4">
    <BasicForm @register="register" ref="formElRef" @submit="handleSubmit" />
    <!-- 子表单区域 -->
    <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
      <a-tab-pane tab="日历明细" key="busSupplyDemandBalanceItem" :forceRender="true">
        <JVxeTable
          keep-source
          resizable
          ref="busSupplyDemandBalanceItem"
          :loading="busSupplyDemandBalanceItemTable.loading"
          :columns="busSupplyDemandBalanceItemTable.columns"
          :dataSource="busSupplyDemandBalanceItemTable.dataSource"
          :height="640"
          :rowNumber="true"
          :disabled="formDisabled"
        >
        </JVxeTable>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { BasicForm, FormSchema, FormActionType, useForm } from '/@/components/Form';
import { CollapseContainer } from '/@/components/Container';
import { formSchema, busSupplyDemandBalanceItemColumns } from './BasAccountingCalendar.data';
import { generateAccountingPeriod, getAccountingCalendar } from './BasAccountingCalendar.api';
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts';

const schemas: FormSchema[] = formSchema;

export default defineComponent({
  components: { BasicForm, CollapseContainer },
  setup() {
    const formElRef = ref<Nullable<FormActionType>>(null);
    const [register, { setProps, resetFields, setFieldsValue, validate }] = useForm({
      labelWidth: 100,
      schemas,
      showResetButton: false,
      actionColOptions: {
        span: 1,
      },
      submitButtonOptions: {
        text: '生成会计期间',
      },
    });
    const isUpdate = ref(true);
    const formDisabled = ref(false);
    const refKeys = ref(['busSupplyDemandBalanceItem']);
    const activeKey = ref('busSupplyDemandBalanceItem');
    const busSupplyDemandBalanceItem = ref();
    const tableRefs = { busSupplyDemandBalanceItem };
    const busSupplyDemandBalanceItemTable = reactive({
      loading: false,
      dataSource: [],
      columns: busSupplyDemandBalanceItemColumns,
    });
    init();
    async function init() {
      let action = await getAccountingCalendar();
      resetFields();
      action.accountingYear=action.accountingYear.toString()
      setFieldsValue({
        ...action,
      });
      busSupplyDemandBalanceItemTable.dataSource=action.basAccountingCalendarItemList
      requestSubTableData(getAccountingCalendar, { }, busSupplyDemandBalanceItemTable);
    }
    //方法配置
    const [handleChangeTabs, requestSubTableData] = useJvxeMethod( classifyIntoFormData, tableRefs, activeKey, refKeys);
    function classifyIntoFormData(allValues) {
      let main = Object.assign({}, allValues.formValue);
      console.log('allValues')
      return {
        ...main, // 展开
        basAccountingCalendarItemList: allValues.tablesValue[0].tableData,
      };
    }
    async function handleSubmit() {
      try {
        const values = await validate();
        //setDrawerProps({ confirmLoading: true });
        //提交表单
        await generateAccountingPeriod(values, true);
        await init();
        //emit('success');
      } finally {
        //setDrawerProps({ confirmLoading: false });
      }
    }
    return {
      formElRef,
      schemas,
      register,
      setProps,
      isUpdate,
      busSupplyDemandBalanceItem,
      busSupplyDemandBalanceItemTable,
      formDisabled,
      refKeys,
      activeKey,
      tableRefs,
      handleSubmit,
      handleChangeTabs,
    };
  },
});
</script>